import React, { useEffect } from 'react'
import styles from './Airticlelist.less'
import { FileTextOutlined } from '@ant-design/icons'
import { timeAgo } from '@/utils/index'
import useStore from '@/context/useStore'
import { observer } from 'mobx-react-lite'
import {useHistory} from 'umi'


const Airticlelist = () => {
    let { article, category, tag } = useStore()
    const history=useHistory()
    useEffect(() => {
        // 获取右侧推荐
        article.getArticleRecommend();
    }, [])
    const godetail=(id:string)=>{
   
        history.push(`/article/detail/${id}`,id)
     
    }
    return (
        <div className={styles.articlelist}>
            <div className={styles.icontitle}><FileTextOutlined /> <span>推荐文章</span></div>
            <div>
                <ul>
                    {
                        article.articleRecommend.map((item: any) => {
                            return <li key={item.id}   onClick={()=>{godetail(item.id)}}>
                                <span>{item.title} · {timeAgo(+ new Date(item.createAt))}前</span>
                            </li>
                        })
                    }
                </ul>
            </div>
        </div>

    )
}

export default observer(Airticlelist);